<template>
    <div class="app-container" ref="appContainer">
        <!-- <div class="header"> -->
        <div>
            <!-- ------------表格--------------->

            <div class="header">
                <el-form :inline="true" class="search-form" :model="inputSearch" ref="ruleFormRef">
                    <el-form-item>
                        <el-date-picker v-model="inputSearch.searchDate" type="date" placeholder="选择日期"
                            @change="getDayData">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="请输入用户ID">
                        <el-input v-model="inputSearch.searchId" :placeholder="`请输入用户ID`" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="inputSearch.gameName" placeholder="所有游戏">
                            <el-option v-for="item in gameNameList" :key="item" :label="item" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>

                <div class="search">
                    <el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
                </div>
            </div>


            <div class="table">
                <el-table v-loading="loading" :data="showDataList" show-summary highlight-current-row style="width: 100%"
                    :border="true">
                    <el-table-column label="时间" align="center" prop="time" width="170px">
                    </el-table-column>
                    <el-table-column label="id" align="center" prop="id" width="170px">
                    </el-table-column>
                    <el-table-column label="游戏" align="center" prop="gameType" width="170px">
                    </el-table-column>
                    <el-table-column label="房间号" align="center" prop="room_id" width="170px">
                    </el-table-column>
                    <el-table-column label="俱乐部Id" align="center" prop="clubid" width="170px">
                    </el-table-column>
                    <el-table-column label="大赢家" align="center" prop="bigWin" width="170px">
                    </el-table-column>
                    <el-table-column label="玩家" align="center" prop="playerList">
                        <template #default="scope">
                            <div style="display:flex;">
                                <div v-for="player in scope.row.playerList" style="width:80PX ;">
                                    <div>
                                        {{ player.userid }}
                                    </div>
                                    <div>
                                        {{ player.score }}
                                    </div>
                                </div>

                            </div>

                        </template>
                    </el-table-column>

                    <el-table-column label="操作" align="center" width="200px">
                        <template #default="scope">
                            <el-button type="primary" @click="onClickDetail(scope.row)">得分详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </div>

        </div>

        <!-- ------------分页--------------->
        <div class="pagination">
            <el-pagination v-model:currentPage="pageObj.pagenum" :page-size="pageObj.pagesize" background
                layout="total, sizes, prev, pager, next, jumper" :total="pageObj.total" @size-change="handleSizeChange"
                @current-change="getList" />
        </div>


        <el-dialog v-model="dialogVisible" title="战绩详情" width="90%">
            <el-table v-loading="loading" :data="detailList" fit highlight-current-row style="width: 100%" :border="true">
                <el-table-column label="id" align="center" prop="id" width="155px">
                </el-table-column>
                <el-table-column label="牌局" align="center" prop="ju" width="155px">
                    <template #default="scope">
                        第{{ scope.row.ju }}局
                    </template>
                </el-table-column>
                <el-table-column label="时间" align="center" prop="time" width="170px">
                </el-table-column>
                <el-table-column label="玩家" align="center" prop="playerList">
                    <template #default="scope">
                        <div style="display:flex;justify-content: center;">
                            <div v-for="player in scope.row.playerList" style="width:80PX;">
                                <div>
                                    {{ player.userid }}
                                </div>
                                <div>
                                    {{ player.score }}
                                </div>
                            </div>

                        </div>

                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false">
                        好的
                    </el-button>
                </span>
            </template>

        </el-dialog>


    </div>
</template>
<script lang="ts" setup name="comprehensive">
import { Search } from '@element-plus/icons-vue'
import { Logger } from '@/engine/util/Logger'
import { DateUtil } from '@/engine/util/DateUtil'
import { HttpClient } from '@/utils/HttpClient'
import { nextTick, onMounted, reactive, ref } from 'vue'
import { da, pa, pl, tr } from 'element-plus/es/locale'
import { GameConfig } from '@/config/GameConfig'
const loading = ref(true)
const activeName = ref("first")
const appContainer = ref(null)
const dialogVisible = ref(false)


const inputSearch = reactive({
    searchId: '',
    searchDate: new Date(),
    gameName: '所有游戏',
})

const gameNameList = GameConfig.GameNameList


let showDataList = reactive([
    {

    }
])

const detailList = reactive([
    {

    }
])

//列表查询选项
const pageObj = reactive({
    pagenum: 1, //第几页
    pagesize: 10, //一页多少个
    total: 0,
})

const handleSizeChange = (val: number) => {
    pageObj.pagesize = val
    getList()
}


onMounted(() => {
    nextTick(() => {
        // let data = appContainer.value.
    })
    setTimeout(() => {
        loading.value = false
    }, 500)
    getList()
})

const handleClickGameType = () => {

}

const getDayData = () => {
    //   Logger.log("getDayData===", inputSearch)
    getList()
}


const getList = () => {
    Logger.log('onclickSearch!', inputSearch)
    // if(inputSearch.searchId ==)
    let searchId: number = parseInt(inputSearch.searchId)
    if (isNaN(searchId)) {
        searchId = 0
    }
    let gameType: number = GameConfig.GameNameList.indexOf(inputSearch.gameName)
    Logger.log("gameType==", gameType)
    HttpClient.get_zhanji(inputSearch.searchDate.getTime(), pageObj.pagenum, pageObj.pagesize, searchId, gameType, (dataList: Array<object>) => {
        formatDataList(dataList, showDataList)
    })
}


const formatDataList = (dataList: Array<object>, resultList: Array<object>) => {
    resultList.splice(0)

    for (let i = 0; i < dataList.length; i++) {
        let playerList = []
        if (dataList[i]["playerList"]) {
            playerList = JSON.parse(dataList[i]["playerList"])
        }
        let data = {
            "id": dataList[i]["id"],
            "room_id": dataList[i]["room_id"],
            "gameType": GameConfig.GameNameList[dataList[i]["gameType"]],
            "clubid": dataList[i]["clubid"],
            "time": DateUtil.formatDateStr(new Date(dataList[i]["time"]).getTime()),
            "bigWin": dataList[i]["bigWin"],
            "playerList": playerList,

        }
        resultList[i] = data
    }
    Logger.log("formatDataList==", resultList)
    resultList.sort((a: object, b: object) => {
        return b["id"] - a["id"]
    })
}

const onClickDetail = (row) => {
    Logger.log("onClickDetail==", row)
    HttpClient.get_zhanji_detail(row["id"], (dataList: Array<object>) => {
        detailList.splice(0)
        for (let i = 0; i < dataList.length; i++) {
            let playerList = []
            if (dataList[i]["playerList"]) {
                playerList = JSON.parse(dataList[i]["playerList"])
            }
            let data = {
                "id": dataList[i]["id"],
                "ju": dataList[i]["ju"],
                "time": DateUtil.formatDateStr(new Date(dataList[i]["time"]).getTime()),
                "playerList": playerList,
            }
            detailList[i] = data
        }
        detailList.sort((a: object, b: object) => {
            return b["ju"] - a["ju"]
        })
        dialogVisible.value = true
    })
}




</script>
      
<style scoped lang="scss">
.header {
    display: flex;
    padding: 16px 16px 0 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    background: white;
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);

    .search-form {
        flex: 1;

        ::v-deep {
            .el-input--default {
                width: 200px;
            }
        }
    }

    .search {
        flex-shrink: 0;
        white-space: nowrap;
    }
}
</style>
      